<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 搜索栏 添加按钮 -->
      <el-form :model="form" ref="formRef" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="7">
            <el-form-item label="学科名称" size="small" prop="subjectName"
              ><el-input
                v-model.trim="form.subjectName"
                clearable
                @clear="clearKeyword"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button size="small" @click="clearKeyword">清除</el-button>
            <el-button type="primary" size="small" @click="getSubjectsList"
              >搜索</el-button
            ></el-col
          >
          <el-col :span="11" class="add-btn">
            <el-button
              type="success"
              icon="el-icon-edit"
              size="small"
              @click="changeSubject(true)"
              >新增学科</el-button
            ></el-col
          >
        </el-row>
      </el-form>

      <!-- 警示条 -->
      <el-alert
        class="alert-bar"
        title="数据一共 15 条"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>

      <!-- 表格 -->
      <el-table :data="subjectsList" style="width: 100%">
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="subjectName" label="学科名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="160">
          <template slot-scope="scope">
            {{ scope.row.addDate | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示">
          <template #default="scope">
            {{ scope.row.isFrontDisplay == 1 ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="twoLevelDirectory"
          label="二级目录"
        ></el-table-column>
        <el-table-column prop="tags" label="标签"></el-table-column>
        <el-table-column
          prop="totals"
          label="题目数量"
          width="100"
        ></el-table-column>
        <el-table-column label="操作" width="240">
          <template #default="scope">
            <el-button
              type="text"
              @click="
                $router.push({
                  path: '/subjects/directorys',
                  query: { id: scope.row.id, name: scope.row.subjectName }
                })
              "
              >学科分类</el-button
            >
            <el-button
              type="text"
              @click="
                $router.push({
                  path: '/subjects/tags',
                  query: { id: scope.row.id, name: scope.row.subjectName }
                })
              "
              >学科标签</el-button
            >
            <el-button type="text" @click="changeSubject(false, scope.row)"
              >修改</el-button
            >
            <el-button type="text" @click="deleteSubject(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        class="pagination-table"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pagesize"
        layout=" prev, pager, next, sizes,jumper"
        :total="total"
        background
      >
      </el-pagination>
    </el-card>

    <!-- 增加或修改弹出层 -->
    <subjects-add
      :isChangeSubjectDialogVisible="isChangeSubjectDialogVisible"
      :title="title"
      :changeSubjectForm="changeSubjectForm"
    />
  </div>
</template>

<script>
import SubjectsAdd from '../components/subjects-add'
import { list, remove } from '@/api/hmmm/subjects'
export default {
  name: 'Subjects',
  components: { SubjectsAdd },
  props: {},
  data() {
    return {
      form: {
        subjectName: null
      }, // 搜索关键词
      subjectsList: [], // 学科列表
      page: 1, // 页码
      pagesize: 10, // 每页条数
      total: 0, // 总条数
      // 添加或修改学科弹框
      isChangeSubjectDialogVisible: false,
      // 添加或修改学科
      changeSubjectForm: { id: null, subjectName: null, isFrontDisplay: true },
      // 弹框标题
      title: '新增学科'
    }
  },
  created() {
    this.getSubjectsList()
  },
  mounted() {},
  methods: {
    // 获取学科列表
    async getSubjectsList() {
      try {
        const { data } = await list({
          page: this.page,
          pagesize: this.pagesize,
          subjectName: this.form.subjectName
        })
        this.subjectsList = data.items
        this.total = data.counts
      } catch (err) {
        this.$message.error('获取学科列表失败')
      }
    },
    // 条数
    handleSizeChange(newSize) {
      this.pagesize = newSize
      this.getSubjectsList()
    },
    // 页码
    handleCurrentChange(newPage) {
      this.page = newPage
      this.getSubjectsList()
    },
    // 清除查询条件并搜索
    clearKeyword() {
      this.$refs.formRef.resetFields()
      this.getSubjectsList()
    },
    // 删除学科
    async deleteSubject(id) {
      const confirmStr = await this.$confirm(
        '此操作将永久删除该学科, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmStr !== 'confirm') return
      try {
        await remove({ id })
        this.$message.success('删除成功')
        // 删除小bug
        if (this.subjectsList.length === 1) {
          this.page = this.page === 1 ? 1 : this.page - 1
        }
        this.getSubjectsList()
      } catch (err) {
        this.$message.error('删除失败')
      }
    },
    // 添加或编辑学科
    changeSubject(isAddOrEdit, row) {
      // 弹框显示
      this.isChangeSubjectDialogVisible = true
      if (!isAddOrEdit) {
        // 修改
        this.title = '修改学科'
        row.isFrontDisplay = row.isFrontDisplay === 1
        // 复制拷贝数据  否则修改时会导致视图层数据同步修改
        this.changeSubjectForm = JSON.parse(JSON.stringify(row))
      }
      // 用来判断确定按钮是发送添加还是修改请求的
      this.changeSubjectForm.isAddOrEdit = isAddOrEdit
    }
  },
  computed: {},
  watch: {}
}
</script>

<style lang="less" scoped>
.add-btn {
  text-align: right;
}
// TODO: 可以写公共样式
.alert-bar {
  margin-bottom: 15px;
}
// TODO: 可以写公共样式
.pagination-table {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
/deep/.el-pagination__jump {
  margin-left: unset;
}
/deep/.el-dialog__footer {
  display: flex;
  justify-content: flex-end;
}
</style>
